<template>
    <view>
        <view class="register-title">
            昵称&头像
        </view>
        <view class="register-tip">
            取个好听的名字吧
        </view>
        <view class="register-birthday register-border">
            <van-field v-model="state.ShowName" placeholder="请输入用户名" maxlength="10" show-word-limit />
        </view>
        <view class="register-tip">
            上传头像
        </view>
        <view class="register-birthday register-position">
            <view class="" @click="uploadFn()">
                <van-image width="128rpx" height="128rpx" fit="cover" :src="state.Avatar ? state.Avatar : a1" />
            </view>
        </view>
        <view class="register-tip">
            身高 · 体重
        </view>
        <view class="register-birthday register-border" @click="selectFn(1)">
            <view class="register-birthday-item">{{ state.Height ? state.Height + 'cm · ' + state.Weight + 'kg' : '' }}
            </view>
        </view>
        <view class="register-tip">
            职业
        </view>
        <view class="register-birthday register-border"  @click="selectFn(2)">
            <view class="register-birthday-item">{{ state.JobName ? state.JobName : '' }}</view>
        </view>
        <uni-popup ref="popupJobRef" type="bottom">
            <van-picker title="选择" :columns="state.columns" @cancel="cancel" @confirm="confirmFn" />
        </uni-popup>
    </view>
</template>

<script setup>

import {
    getUserJob
} from "@/api/register/index.js"

import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import a1 from '@/assets/image/bg9.png'
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
let { proxy } = getCurrentInstance()

const emits = defineEmits(["update:nicknameHeadDataFn"])

const state = reactive({
    ShowName: "", // 显示名称
    Avatar: "", //头像
    JobID: null, // 职业
    Height: null, // 身高
    Weight: null, // 体重
    jobW: "",
    columns: [],
    JobName: "",
    jobData: [],
    HeightWeightData: [],
    types: 1, // 1体重身高 2 职业

})

const traversalFn = (dataList) => {
    dataList.forEach(o => {
        o.text = o.ShowName
        o.value = o.ID
        o.children = o.Children
        if (o.children.length) traversalFn(o.children)
    })
}

const getUserJobFn = async () => {
    let data = await proxy.$get(getUserJob)
    if (data.code == 200) {
        traversalFn(data.data)
        state.jobData = data.data
    }
}

// 上传文件
const uploadFn =() => {
    let tokenObj = getAuthorization("token") ? JSON.parse(getAuthorization("token")) : ""
    let token = tokenObj.AccessToken
    uni.chooseImage({
	count: 1, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album','camera'], //从相册选择
	success: function (res) {
        uni.uploadFile({
			url: '/api/app/api/G/user-heibai/v1/Files', //仅为示例，非真实的接口地址
			filePath: res.tempFilePaths[0],
			name: 'file',
            header:{
                "Authorization": "Bearer " + token
            },
			formData: {
				'groupCode': '99999999'
			},
			success: (uploadFileRes) => {
                let data = JSON.parse(uploadFileRes.data)
                if(data.code == 200 ){
                    state.Avatar = data.data[0].Path
                }
			}
		});
	}
});
}

onMounted(() => {
    let childArr = []
    for (let i = 0; i < 120; i++) {
        if (i > 29) {
            childArr.push({
                text: i + 'kg',
                value: i
            })
        }
    }
    for (let i = 0; i < 230; i++) {
        if (i > 139) {
            state.HeightWeightData.push({
                text: i + 'cm',
                value: i,
                children: childArr
            })
        }
    }
    getUserJobFn()
})

// nicknameHeadData:{
//         ShowName:"", // 显示名称
//         Avatar:"", //头像
//         JobID:null, // 职业
//         Height:null, // 身高
//         Weight:null, // 体重
//     }

const nicknameHeadData = () => {
    let params = {
        ShowName:state.ShowName, // 显示名称
        Avatar:state.Avatar, //头像
        JobID:state.JobID, // 职业
        Height:state.Height, // 身高
        Weight:state.Height, // 体重
    }
    emits("update:nicknameHeadDataFn",params)
}

const cancel = () => {
    proxy.$refs.popupRef.close()
}

const confirmFn = (val) => {
    if (state.types == 1) {
        state.Height = val.selectedValues[0]
        state.Weight = val.selectedValues[1]
    } else {
        state.JobName = val.selectedOptions[1].text
        state.JobID = val.selectedOptions[1].ID
    }
    proxy.$refs.popupJobRef.close()
}

// 选择身高体重
const selectFn = (types) => {
    state.types = types
    if (types == 1) state.columns = state.HeightWeightData
    if (types == 2) state.columns = state.jobData
    proxy.$refs.popupJobRef.open()
}

defineExpose({
    nicknameHeadData
})

</script>

<style lang="scss" scoped>
.register-box {
    padding: 30rpx 70rpx;
}

.register-title {
    color: #262626;
    font-size: 48rpx;
    margin-top: 80rpx;
    font-weight: 600;
}

.register-tip {
    color: #262626;
    font-size: 32rpx;
    margin-top: 70rpx;

    &::before {
        display: inline-block;
        content: "";
        width: 16rpx;
        height: 16rpx;
        border-radius: 40rpx;
        background: #262626;
        position: relative;
        top: -4rpx;
    }
}

.register-sex {
    display: flex;
    margin-top: 50rpx;

    .register-sex-item {
        width: 168rpx;
        text-align: center;
        color: #999;

        img {
            width: 100%;
            margin-bottom: 20rpx;
        }

    }

    .register-sex-item:nth-child(1) {
        margin-right: 200rpx;
    }
}

.register-birthday {
    display: flex;
    margin-top: 44rpx;
    height:44rpx;

    .register-birthday-item {
        font-size: 32rpx;
        color: #333;
    }
}

.register-birthday-cur {
    view {
        color: #333;
    }
}

.van-field {
    padding: 0;

}

:deep(.van-field__control) {
    font-size: 32rpx;
    color: #262626;
}

:deep(.van-field__value) {
    display: flex;
    justify-content: space-between;
}

:deep(.van-field__word-limit) {
    font-size: 32rpx;
    color: #999;
}

.register-border {
    border-bottom: 1px solid #C6C6C6;
    padding-bottom: 16rpx;
}
</style>
